<script>
import { CloseBold, Minus, FullScreen } from "@element-plus/icons-vue";
import { ElDescriptions, ElDescriptionsItem, ElButton } from 'element-plus'
export default {
  name: "buffer-overlay",
  components: { ElDescriptions, ElDescriptionsItem, CloseBold, Minus, FullScreen, ElButton },
  data() {
    return {
      isMini: false,
      isShowDetail_: false
    };
  },
  props: {
    mainTitle: {
      type: String,
      default: ''
    },
    isShowDetail: {
      type: Boolean,
      default: false
    },
    propsType: {
      type: String
    },
    listData: {
      type: Array,
      default() { return [] }
    },
    // 是否仅用于定位
    onlyLocate: {
      type: Boolean,
      default: true
    },
    size: {
      type: Boolean,
      default: false
    },
    detail: {
      type: Boolean,
      default: false
    }
  },
  computed: {
  },
  watch: {
    isShowDetail_(nV) {
      // console.log(this.bufferMessage, 'bufferMessage')
    }
  },
  mounted() {
    this.init();
  },
  beforeUnmount() {
  },
  methods: {
    close() {
      this.$emit('close', {
        unid: this.unid
      })
      this.showDetail(false)
    },
    changeSize() {
      this.isMini = !this.isMini;
      this.$emit('size', this.isMini);
    },
    showDetail(bool) {
      if(this.onlyLocate) { return }
      this.isShowDetail_ = bool;
      this.$emit('detail', bool);
    },
    init() {
      this.isShowDetail_ = this.detail;
      this.isMini = this.size;
    }
  },
};
</script>

<template>
  <div class="information-normal" :class="[
    isMini ? 'is-mini' : '',
    isShowDetail_ ? 'show-detail' : ''
  ]">
    <header v-if="!onlyLocate && isShowDetail_" class="font-alimamashuheiti">
      <span>{{ mainTitle }}</span>
      <div class="funciton-area">
        <div class="icon-area hover-pointer" @click.stop="changeSize">
          <FullScreen v-if="isMini" />
          <Minus v-else />
        </div>
        <div class="icon-area hover-pointer" @click.stop="close">
          <CloseBold />
        </div>
      </div>
    </header>
    <main v-if="!onlyLocate && isShowDetail_" v-show="!isMini">
      <el-descriptions :column="2" title="" border>
        <el-descriptions-item v-for="(item, index) in listData" :key="index" :label="item.key">{{ item.value
          }}</el-descriptions-item>
      </el-descriptions>
    </main>

    <div class="popup-tip-container" @click="showDetail(true)" :class="[
      propsType
    ]">
      <div class="popup-tip"></div>
    </div>
    <div class="ring-container">
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/2000/xlink"
        viewBox="0 0 25.6 25.6" style="background-color: transparent" width="100%" height="100%">
        <use href="#icon-aqua"></use>
      </svg>
    </div>
  </div>
</template>
<style lang="less" scoped>
@shadow-color: rgba(255, 255, 255, 0.2);

.information-normal {
  position: relative;
  background-color: #fff;
  transition: width .3s;

  &.show-detail {
    box-shadow: 0 0 0 .5rem @shadow-color;
  }

  &.is-mini {
    width: auto;
  }

  &>header {
    color: #2168b2;
    padding: .5rem;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &>span {
      font-size: 1.4rem;
      cursor: auto !important;
      padding-right: 1rem;
    }

    &>.funciton-area {
      display: inline-flex;

      &>.icon-area {
        width: 2rem;
        height: 2rem;
      }
    }
  }

  &>main {
    cursor: auto !important;
    padding: 1rem 1rem 0;
    max-height: 30rem;
    overflow-y: auto;

    &>.more-less {
      text-align: right;
      padding: .5rem;
    }

    &>.item {
      line-height: 1.8;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 1rem;
      border-left: 5px solid transparent;
      color: #333;

      &:nth-child(even) {
        background-color: rgba(0, 91, 227, 0.1);
      }

      &:hover {
        background-color: rgba(0, 91, 227, 0.6);
        border-left: 5px solid rgba(0, 91, 227, 1);
        color: #fff;
      }

      & .key {
        font-size: 1.6rem;
      }

      & .value {
        padding-left: 1rem;
        font-size: 1.6rem;
        font-weight: bolder;
      }
    }
  }

  &>.popup-tip-container {
    position: absolute;
    bottom: -43px;
    left: calc(50% - 12.5px);
    content: "";
    width: 25px;
    height: 40px;
    cursor: pointer;
    overflow: hidden;
    background-image: url('@/assets/images/marker-icon.png');
    background-size: 25px 40px;

    &.green {
      background-image: url('@/assets/images/marker-icon-green.png');
    }
  }

  &>.ring-container {
    position: absolute;
    z-index: -1;
    bottom: -64px;
    left: 50%;
    margin-left: -19px;
    content: "";
    width: 40px;
    height: 40px;
    pointer-events: none;
    overflow: hidden;
  }
}
</style>
